<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // async函数 (异步函数)
    // ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
    // async 函数是什么？一句话，它就是Generator函数的语法糖。

    // 如何得到async函数?
    // 1. 在函数function前加关键词 async
    // 2. async函数返回一个 Promise 对象，可以使用then方法添加回调函数

    // async function fn() {
    //     throw 2;      //  => {<rejected>:2}
    //     return 1;     //  => {<fulfilled>:1}
    // }

    // var result = fn();
    // console.log(result);


    // async函数  如何  使异步操作变得更加方便?
    // 1. async函数用于处理Promise封装的异步操作 (前提)
    // 2. async函数中存在关键词 await,  等Promise实例状态改变之后执行后续的代码 (一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。)
    // 3. await 必须在async函数或模块化代码中使用

    // T = T1 + T2 + T3;
    // async function run() {
    //     // debugger;
    //     var a = await getNumAsync(1, 2000); // 返回Promise实例  2s后 =>{<fulfilled>:1}
    //     console.log(a);
    //     var b = await getNumAsync(2, 1000); // 返回Promise实例  1s后 =>{<fulfilled>:1}
    //     console.log(b);
    //     var c = await getNumAsync(3, 3000); // 返回Promise实例  3s后 =>{<fulfilled>:1}
    //     console.log(c);

    //     return a + b + c;
    // }


    var p1 = getNumAsync(1, 2000); // 返回Promise实例  2s后 =>{<fulfilled>:1}
    var p2 = getNumAsync(2, 1000); // 返回Promise实例  1s后 =>{<fulfilled>:2}
    var p3 = getNumAsync(3, 3000); // 返回Promise实例  3s后 =>{<fulfilled>:3}

    async function run() {
        // debugger;
        var a = await p1;
        console.log(a);
        var b = await p2;
        console.log(b);
        var c = await p3;
        console.log(c);

        return a + b + c;
    }


    var p = run();
    p.then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })







    // Promise封装的异步操作 => 调用此方法会立即返回Promise实例(进行中) => 指定时间之后变为成功或失败的状态
    function getNumAsync(num = 0, delay = 0, isFulfilled = true) {
        var p = new Promise(function (resolve, reject) { // 形参
            setTimeout(function () {
                isFulfilled ? resolve(num) : reject(num);
            }, delay)
        });
        return p;  // 返回Promise对象  {<pending>:undefined}
    }

</script>

</html>